<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src='/js/jquery.min.js'></script>
    <style>
      .bor{
        border: 1px solid #eee;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    <div class="bor info">
    </div>
    <div class="bor">
      <input type="text" class="name" placeholder="请输入姓名">
      <input type="text" class="phone" placeholder="请输入电话">
      <input type="text" class="motto" placeholder="请输入格言">
      <button class="update-info">提交</button>
    </div>
    <div class="post">
      <input type="text" class="title" placeholder="请输入标题">
      <input type="text" class="content" placeholder="请输入标题">
      <button class="ok">提交</button>
    </div>
    <div class="post">
      <input type="text" class="user" placeholder="user">
      <input type="text" class="pwd" placeholder="pwd">
      <button class="login">login</button>
    </div>
    <div>图片上传：<input type="file" name="fileToUpload" id="fileToUpload" class="fileupload" /></div>
    <img style="width: 100px;" src="" />
    <div class="test"></div>
  </body>
  <script>
    $.get('/api/searchArticle', {}, function (data) {
      console.log('----userinfo:', data)
    })
    // 图片上传
    $('.fileupload').change(function(event) {
        if ($('.fileupload').val().length) {
            var fileName = $('.fileupload').val();
            var extension = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase();
            if (extension == ".jpg" || extension == ".png") {
              var data = new FormData();
              data.append('fulAvatar', $('#fileToUpload')[0].files[0]);
              $.ajax({
                  url: '/api/uploadImg',
                  type: 'POST',
                  data: data,
                  cache: false,
                  contentType: false, //不可缺参数
                  processData: false, //不可缺参数
                  success: function(data) {
                      console.log('-------upload img:', data);
                      if (data.code == 200) {
                        $('img').attr('src', data.result);
                      }
                  },
                  error: function() {
                      console.log('error');
                  }
              });
            }
        }
    });


    $('.login').click(function() {
      $.ajax({
        type: 'post',
        url: '/api/login',
        data: {
          user: $('.user').val(),
          pwd: $('.pwd').val()
        },
        success: function (data) {
          console.log('----login', data)
          alert(data.message)
        }
      })
    })



    function getList() {
      $.get('/api/test', {}, function (data) {
        console.log('----data', data)
        if (data.code == 200) {
          var html = '', list = data.result;
          for (var i = 0; i < list.length; i++) {
            html += '<div>这是第' + i + '条数据：标题为' + list[i].title + '，内容为' + list[i].content + '</div>'
          }
          $('.test').empty().append(html);
        }
      })
    }
    getList();
    $('.ok').click(function() {
      if (!$('.title').val()) {
        alert('请填写标题');
        return false;
      }
      if (!$('.content').val()) {
        alert('请填写内容');
        return false;
      }
      $.post('/api/addtest', {
        title: $('.title').val(),
        content: $('.content').val()
      }, function (data) {
        console.log('----addtest', data)
        if (data.code == 200) {
          alert('提交成功');
          getList();
        } else {
          alert('提交失败');
        }
      })
    })
    // test
    // $.post('/api/login', {
    //   user: 'lin',
    //   pwd: 'lin'
    // }, function (data) {
    //   console.log('----login', data)
    // })
    $('.update-info').click(function() {
      $.post('/api/updateUserinfo', {
        name: $('.name').val(),
        phone: $('.phone').val(),
        motto: $('.motto').val()
      }, function (data) {
        console.log('----update info', data)
        if (data.code == 200) {
          alert('提交成功');
          // getList();
        } else {
          alert('提交失败');
        }
      })
    })
  </script>
</html>
